<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Github Restful API + XMLHttpRequest</title>

  <script type="text/javascript" src="../_js/vue.min.js"></script>
  <script type="text/javascript" src="./network/request.js"></script>

  <style>
    .searchbar {
      background-color: lavender;
      padding: 10px;
    }

    .title {
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 5px;
    }

    .card {
      padding: 10px 15px;
      float: left;
     }

    /* 使用float:left布局时图片显示区域必须设为确定值，否则可能导致排列错乱 */
    .image {
      border: 2px solid #ccc;
      border-radius: 6px;
      width: 200px;
      height: 260px;
     }

    .image:hover {
      border: 2px solid #777;
    }

    .image img {
      width: 100%;
      height: auto;
      border-radius: 6px 6px 0 0;
    }

    .desc {
      padding: 10px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      height: 40px;
      overflow: hidden;
    }

    .welcome {
      font-size: 24px;
      font-weight: bold;
      font-style: italic;
      background-color: #f3fbf9;
      padding: 10px;
    }

    .loading {
      font-size: 22px;
      font-weight: bold;
      background-color: lightsteelblue;
      padding: 10px;
    }

    .errmsg {
      font-size: 22px;
      background-color: #fb9;
      padding: 10px;
    }

    .clear {
      clear: both;
    }

  </style>
</head>
<body>

  <div id="root">
    <div class='searchbar'>
      <div class="title">Search Github users:</div>
      <input ref="searchtext" type="text" placeholder="Type search text" @keypress="doInput()">
      <button @click="doSearch()">Search</button>
    </div>

    <div v-show="isFirst" class="welcome">Welcome to Github user search home.</div>
    <div v-show="isLoading" class="loading">Loading search results...</div>
    <div v-show="errMsg" class="errmsg">{{errMsg}}</div>
    <div v-show="users" class="card" v-for="item in users" :key="item.id">
      <div class="image">
        <a target="view_window" :href="item.html_url">
          <img :src="item.avatar_url" :alt="item.login">
        </a>
        <div class="desc">{{item.login}}</div>
      </div>
    </div>

    <!-- <div class="clear"></div> -->
  
  </div>

  <script type="module">

    const url = `https://api.github.com/search/users?q=`

    Vue.config.productionTip = false

    const vm = new Vue({
      el: '#root',
      data: {
        isFirst: true,
        isLoading: false,
        errMsg: '',
        users: []
      },
      mounted() {
        this.$nextTick(() => {
          this.doSetDefaultFocus()
        })
      },
      methods: {
        doInput() {
          if (event.keyCode === 13) {
            this.doSearch()
          }
        },

        doSearch() {
          this.isFirst = false
          this.isLoading = true
          this.errMsg = ''

          let edit = this.$refs.searchtext
          if (edit && edit.value){
            this.users = []
            let target = url + edit.value
            request('get', target, '')
              .then((res) => {
                this.isLoading = false
                this.users = res.items
              })
              .catch((err) => {
                this.isLoading = false
                this.errMsg = err.message
                this.users = []
              })
          }else{
            alert('Please type the search text.')
            if (edit) {
              edit.focus()
            }
          }
        },

        doSetDefaultFocus() {
          let edit = this.$refs.searchtext
          if (edit) {
            edit.focus()
          }
        }
      }
    })

  </script>
</body>
</html>